<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      @focus="$router.push('/search')"
      v-model="value"
      placeholder="请输入搜索关键词"
    />
    <!-- 课程列表 -->
    <van-card
      v-for="(item, index) in this.corseList"
      :key="index"
      :price="item.study_count + '个人学习'"
      :desc="item.desc"
      @click="getVideoPages(item.cid)"
    >
      <template class="flexcard" slot="title">
        <img
          class="nav-icon"
          v-if="item.goods_type === 1"
          src="../../assets/images/audio-play.png"
          alt=""
        />
        <img
          class="nav-icon"
          v-else-if="item.goods_type === 2"
          src="../../assets/images/audio-icon.png"
          alt=""
        />
        <span>{{ item.title }}</span>
      </template>

      <template slot="thumb">
        <img
          class="itemImg"
          :src="'http://video.zjsxjy.com' + item.face"
          alt=""
        />
      </template>

      <template slot="num">
        <div class="blue">
          {{ item.price === "0.00" ? "免费" : "￥" + item.price }}
        </div>
      </template>
    </van-card>
  </div>
</template>

<script>
import { getshowCorse } from "@/api";

export default {
  data() {
    return {
      querypage: {
        page: 1,
        size: 10,
        uid: 0,
        flag: 0,
      },
      corseList: [],
      value: "",
    };
  },
  created() {
    this.getshowCorse1();
  },
  methods: {
    //根据cid跳转指定页面   name用parmams  path用query
    getVideoPages(id) {
      this.$router.push({
        path: "/showmoreVideo",
        query: {
          cid: id,
        },
      });
    },
    //获取课程列表
    async getshowCorse1() {
      try {
        const { data: res } = await getshowCorse(this.querypage);
        this.corseList = res.data.course;
        console.log(this.corseList, "showmore");
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
span.van-card__price-currency {
  display: none;
}
.blue {
  color: #0486fe;
  font-size: 14px;
}

.itemImg {
  width: 80px;
  height: 80px;
}

.van-card__content{
  position: relative;
  .nav-icon{
    position: absolute;
    width: 16px;
    bottom: 6px;
    left: -30px;
}
}
/* /deep/.van-card__thumb{
  width: 80px;
} */
</style>
